<template>
	<!-- 个人中心 -->
	<view :class="darkMode?'custom-dark':'custom-light'" class="w-h-100 user-wrap">
		<!-- 顶部用户信息 -->
		<view class="user-top">
			<view class="user-info uni-flex uni-flex-space-between">
				<view class="user-name-wrap uni-flex uni-flex-space-between">
					<view class="user-portrait">
						<image v-if="userInfo.portrait" mode="aspectFill" :src="userInfo.portrait"></image>
						<uni-icons v-else color="#999" class="icon-wode" type="wode" size="35" @tap="goEdit" />
					</view>
					<view class="user-name uni-flex uni-column">
						<text class="font32">{{userInfo.name}}</text>
						<text class="font28">{{userInfo.tel}}</text>
					</view>
				</view>
				<view class="user-setting" @tap="tapSettings">
					<view class="setting  uni-flex uni-flex-center uni-flex-space-center">
						<uni-icons color="#fff" class="icon-shezhi" type="icon-shezhi" size="18" />
						<text class="font24">设置</text>
					</view>
				</view>
			</view>
			<view class="approval uni-flex uni-flex-space-between">
				<view class="approved approval-item" @tap="tapApprovalList">
					<view class="font28">未审批</view>
					<view class="font32">{{userInfo.approved}}</view>
				</view>
				<view class="notApproval approval-item" @tap="tapApprovalList">
					<view class="font28">已审批</view>
					<view class="font32">{{userInfo.notApproval}}</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="user-list">
			<uni-collapse>
				<uni-collapse-item title="所属部门" :thumb="departmentImage">
					<view class="collapse-item-cont">研发部门</view>
				</uni-collapse-item>
				<uni-collapse-item title="所属角色"  :thumb="roleImage">
					<view class="collapse-item-cont">管理员</view>
				</uni-collapse-item>
				<uni-collapse-item title="版本信息"  :thumb="editionImage">
					<view class="collapse-item-cont">V 1.0</view>
				</uni-collapse-item>
				<uni-collapse-item title="联系客服"  :thumb="serviceImage">
					<view class="collapse-item-cont" @tap="tel">0311-56898989</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import md5 from '@/common/lib/md5.min.js'
	export default {
		components: {
			uniPopup,
			uniIcons,
			uniCollapse,
			uniCollapseItem
		},
		computed: {
			...mapGetters(['user', 'themeBgColor', 'darkMode'])
		},
		data() {
			return {
				departmentImage: '/static/img/user/department.png',
				editionImage: '/static/img/user/edition.png',
				roleImage: '/static/img/user/role.png',
				serviceImage: '/static/img/user/service.png',
				appInfo: {
					version: '',
					name: ''
				},
				item: {
					oldPassword: '',
					newPassword: ''
				},
				userInfo: {
					portrait: '',
					name: '耿耿',
					tel: '15031267890',
					notApproval: '23',
					approved: '112'
				}
			}
		},
		onShow() {
		},
		onReady() {
		},
		onLoad() {
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				this.appInfo.version = wgtinfo.version
				this.appInfo.name = wgtinfo.name
			})
			//#endif
		},
		methods: {
			//  拨打电话
			tel(){
				uni.makePhoneCall({
				    phoneNumber: '114' 
				});
			},
			// 跳转设置
			tapSettings() {
				uni.navigateTo({
					url: '/pages/user/setting'
				})
			},
			// 跳转审批列表
			tapApprovalList() {
				uni.navigateTo({
					url: '/pages/user/approval'
				})
			},
		}
	}
</script>

<style lang="scss">
	.user-wrap {
		background-color: #fff;
		.user-top {
			width: 100%;
			height: 340rpx;
			background: url('@/static/img/user-bg.png') no-repeat center top;
			background-size: 100% 100%;
			color: #fff;

			.user-info {
				padding: 60rpx 0 30rpx 40rpx;

				.user-portrait {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #fff;
					text-align: center;
					line-height: 120rpx;
					margin-right: 30rpx;
				}

				.user-setting {
					width: 130rpx;
					height: 68rpx;
					background: url('@/static/img/setting-bg.png') no-repeat center top;
					background-size: 100% auto;

					.setting {
						text-align: center;
						line-height: 68rpx;

						.icon-shezhi {
							margin-right: 10rpx;
						}
					}
				}
			}

			.approval {
				text-align: center;
				padding: 40rpx 40rpx 0rpx;

				.approval-item {
					position: relative;
					width: 50%;

					&::after {
						content: '';
						display: inline-block;
						position: absolute;
						width: 2rpx;
						height: 60rpx;
						right: 0;
						top: 50%;
						margin-top: -30rpx;
						background: #fff;
					}

					&:last-child {
						&:after {
							background: none;
						}
					}
				}
			}
		}
		.user-list{
			height: 800rpx;
			overflow-y: scroll;
			padding:20rpx 40rpx 80rpx;
			background-color: #fff;
			.uni-collapse{
				.uni-collapse-cell{
					border:none;
					margin-bottom:40rpx;
					border-radius: 10rpx;
					box-shadow: 0 2px 2px 1px rgba(0,0,0,.1);
					::v-deep uni-image{
						img{
							width: 45rpx!important;
							height: auto;
							opacity:1;
							vertical-align: middle;
						}
						div{
							display: none;
						}
					}
					::v-deep .uni-icon{
						font-size: 30rpx!important;
					}
				}
				::v-deep .uni-collapse-cell--open{
					background-color: #fff!important;
					.uni-collapse-cell__content{
						padding: 20rpx 100rpx 30rpx!important;
						border-top: 1px solid #eee;
					}
				}
			}
		}
	}
</style>
